<template>
<div class="orderList">
  <loading v-show="loading" class="loading"></loading>
  <div class="item"  v-for="o in obj">
    <div class="hd">
      <span class="title">{{o.car_no}}</span>
      <span v-if="o.status===1" class="delete" @click="del(o.order_no)">删除</span>
    </div>
    <div class="bd" @click="orderItemList(o)">
      <div class="cell">
        <span class="k">下单时间</span>
        <span class="v">{{o.create_time | timeFilter}}</span>
      </div>
      <div class="cell">
        <span class="k">订单批号</span>
        <span class="v">{{o.order_no}}</span>
      </div>
      <div class="cell">
        <span class="k">订单状态</span>
        <span class="v">{{o.status | statusFilter}}</span>
      </div>
    </div>
    <div class="ft">
      <span>订单金额<b class="money">￥{{o.total_amount}}</b></span>
      <span class="status">{{o.status | statusFilter}} ></span>
    </div>
  </div>
  <div class="no-order" v-show='noResult' >
    <p><img src="../assets/image/not_result.png" alt=""></p>
    <span>您还没有相关的订单</span>
  </div>
</div>
</template>
<script>
import * as API from '../assets/js/API.js'
import Loading from '../components/Loading.vue'
export default {
  components: {
    Loading
  },
  data () {
    return {
      access_token: this.$route.params.accessToken,
      openid: this.$route.params.openid,
      obj: {},
      noResult: false,
      loading: true // 加载框
    }
  },
  created () {
    window.localStorage.setItem('accessToken', this.access_token)
    window.localStorage.setItem('openid', this.openid)
    this.orderList()
  },
  methods: {
    navTo (link) {
      this.$router.push({path: link})
    },
    orderItemList (v) {
      this.navTo('/orderItremList/' + v.order_no + '/' + v.car_no)
    },
    // 获取订单列表
    orderList () {
      let param = {
        openId: this.openid,
        curPageNO: 1,
        pageSize: 5
      }
      this.$http.post(API.OrderList, {access_token: this.access_token, param: JSON.stringify(param)}).then(
        (resp) => {
          this.loading = false
          let msg = resp.body.msg
          let data = resp.body.data
          if (msg === 'OK') {
            this.obj = data.resultList
            if (this.obj.length === 0) {
              this.noResult = true
            } else {
              this.noResult = false
            }
          } else {
            this.$Message.info(msg)
          }
        }
      )
    },
    // 删除订单
    del (v) {
      this.$Modal.confirm({
        // title: '删除',
        content: '<p style="text-align:left;font-size:20px">确认删除该订单?</p>',
        onOk: () => {
          this.delConfirm(v)
        },
        onCancel: () => {
        }
      })
    },
    delConfirm (v) {
      let param = {
        orderNo: v,
        openId: this.openid
      }
      this.$http.post(API.DelUnPayOrder, {access_token: this.access_token, param: JSON.stringify(param)}).then(
       (resp) => {
         let code = resp.body.code
         let msg = resp.body.msg
         if (code === 200) {
           this.$Message.info('删除成功')
           this.orderList()
         } else {
           this.$Message.info(msg)
         }
       }
      )
    }
  },
  filters: {
    timeFilter (v) {
      if (!v) return
      var now = new Date()
      now.setTime(v)
      let y = now.getFullYear()
      let m = now.getMonth() + 1
      let d = now.getDate()
      let h = now.getHours()
      let mm = now.getMinutes()
      let s = now.getSeconds()
      return y + '-' + (m < 10 ? '0' + m : m) + '-' +
        (d < 10 ? '0' + d : d) + '   ' + (h < 10 ? '0' + h : h) + ':' + (mm < 10 ? '0' + mm : mm) + ':' + (s < 10 ? '0' + s : s)
    },
    statusFilter (v) {
      if (v === 1) {
        return '待付款'
      } else if (v === 2) {
        return '处理中'
      } else {
        return '已结束'
      }
    }
  }
}
</script>
<style lang="scss">
@import '../assets/style/common.scss';

.orderList {
  /*background-color: #eee;*/
  padding: px2rem(20px) px2rem(10px);
  .item {
    width: 100%;
    height: px2rem(300px);
    background-color: #fff;
    margin-top: px2rem(10px);
    box-shadow: 0 0 10px 0 rgba(155, 143, 143, 0.6);
    -webkit-box-shadow: 0 0 10px 0 rgba(155, 143, 143, 0.6);
    border-radius: px2rem(5px);
    border-left: px2rem(10px) solid #35b41c;
    padding-left: px2rem(20px);
    > .hd {
      height: px2rem(60px);
      line-height: px2rem(60px);
      border-bottom: 1px solid #eee;
      .title {
        font-size: px2rem(24px);
        font-weight: bold;
        text-transform : uppercase;
      }
      .delete {
        display: inline-block;
        width: px2rem(80px);
        height: px2rem(40px);
        line-height: px2rem(40px);
        margin-top: px2rem(10px);
        border-radius: px2rem(5px);
        text-align: center;
        background-color: red;
        color: #fff;
        float: right;
        margin-right: px2rem(20px);

      }
    }
    > .bd {
      .cell {
        font-size: px2rem(24px);
        width: 100%;
        height: px2rem(50px);
        line-height: px2rem(50px);
        .k {
          display: inline-block;
          float: left;
        }
        .v {
          float: right;
          margin-right: px2rem(20px);
        }
      }
    }
    > .ft {
      margin-top: px2rem(30px);
      height: px2rem(50px);
      line-height: px2rem(50px);
      font-size: px2rem(24px);
      .money {
        color: red;
        margin-left: px2rem(20px);
      }
      .status {
        float: right;
        margin-right: px2rem(20px);
        color: red;
      }
    }
  }
}

</style>
